import React from 'react';
import { Scene, Actions } from 'react-native-router-flux';
import { Alert } from 'react-native';
import moment from 'moment';
import detail from '../models/customer';
import Result from './result';
import navBarStyle from '../../../components/navBarStyle';
import Form from './Form';

const pressHandle = values => {
  values.birthday =
    values.birthday && moment(values.birthday).format('YYYY-MM-DD');
  if (!values.customerId) {
    detail.create(values);
  } else {
    detail.update(values).then(name => {
      if (name) {
        Alert.alert('操作成功', `更新客户${name}的资料`, [
          { text: '返回', onPress: Actions.pop }
        ]);
      }
    });
  }
};

module.exports = [
  <Scene
    key="customerBaseCompleted"
    component={props => <Result {...props} />}
    path="edit/customer/base/complete"
    title="操作结果"
    hideTabBar
    hideNavBar
  />,
  <Scene
    key="createCustomerBase"
    component={(props) => <Form
      {...props}
      detail={detail}
      onSubmit={pressHandle}
    />}
    path="create/customer/base"
    title="新增客户"
    hideTabBar
    onEnter={detail.resetCustomer.bind(detail)}
    {...navBarStyle}
  />,
  <Scene
    key="editCustomerBase"
    component={(props) => <Form
      {...props}
      detail={detail}
      onSubmit={pressHandle}
    />}
    path="edit/customer/base/:id"
    title="更新客户基础信息"
    hideTabBar
    onEnter={props => {
      detail.getCostomer.call(detail, props.customerId);
    }}
    {...navBarStyle}
  />
];

/* 
notice：
Scene.component属性的组件的props的注入：
1. 通过Scene的额外属性注入；
2. component属性中的函数（stateless component）直接注入；
以上两种方法都可以达到目的，但是略有区别；
  当Scene.type === 'replace'时，或者以replace的方式跳转至该Scene时，方法1的注入会失败
*/
